<template>
  <div class="user-set" style="width: 92%;margin-left:4%;">
    <div v-if="data">
      <Header title="设置" :xiao="xiao" :titledi="titledi" style="width: 94%;margin-left:3%;"></Header>
      <div class="box"></div>
      <div class="list">
        <p @click="$router.push('/usersafe')">账号与安全 <span class="da">&gt;</span></p>
        <p>资料编辑 <span class="da">&gt;</span></p>
        <p>清除缓存 <span>2.00KB</span></p>
        <p>意见反馈 <span class="da">&gt;</span></p>
        <p>关于社区 <span class="da">&gt;</span></p>
        <button @click="superstratum = true">退出登录</button>
      </div>
      <!-- <dele :superstratum="superstratum" @queren="quit" @conse="superstratum = false" title="退出登录"></dele> -->
    </div>
    <div></div>
  </div>
</template>
<script>
// import dele from '@/components/dele.vue';
import Header from '../components/common/Header.vue';
export default {
  name: 'userset',
  components: {
    // dele,
    Header
  },
  data() {
    return {
      superstratum: false,
      // 控制小于号显示隐藏
      xiao: true,
      // 控制title字段的位置
      titledi: '165px',
      data: ''
    }
  },
  methods: {
    quit() {
      this.superstratum = false
      localStorage.clear()
      this.$router.push('my')
    }
  },
  created() {
    this.data = JSON.parse(localStorage.getItem('data'))
  }
};
</script>
<style lang='scss' scoped>
.user-set {

  .box {
    height: 60px;
    width: 100%;
  }

  .list {
    p {
      font-size: 16px;
      margin-bottom: 30px;

      span {
        float: right;
        color: #999;
      }

      .da {
        font-size: 20px;
        color: rgb(187, 187, 187);
      }
    }

    button {
      width: 100%;
      line-height: 40px;
      font-size: 18px;
      border-radius: 20px;
      border: none;
      background-color: #FF4A6A;
      color: #fff;
    }
  }
}
</style>